<template>

 <div class="recharge">

        <div class="header"><van-nav-bar title="矿机"  :fixed="true" :z-index="2" /></div>
         <div class="footer_placeholder" id="cust_head" style="width:100%;height:3rem"></div>
        <!-- <div ad><img v-if="list!=false" :src="baseURL+list.lunbo.img"/></div> -->
            <!-- <div class="slider">
                <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(image, index) in images_swiper" :key="index">
                    <img :src="baseURL+image.img" style="width: 100%;" />
                </van-swipe-item>
                
                </van-swipe>
             </div> -->
        <div tab>
            <van-tabs v-model="active_device" line-width="2rem">
                <van-tab title="矿机设备">
                    <div>
                        
                            <div class="order_info"  v-for="(item, index) in list.machine"   >
                              <div img ><img :src="baseURL+item.pic"/></div>
                              <div info >
                                  <div>设备信息：<span v-html="item.name"></span></div>
                                  <div>生命周期：<span v-html="item.cycle"></span></div>
                                  <div>投资收益：<span v-html="item.ratio+'‰'"></span></div>
                                  <div>设备价格：<span v-html="item.price"></span></div>
                                  <div  class="dev_but"><van-button @click="buy(item.type,item.price)" type="default">立即换购</van-button></div>
                              </div>
                            </div>
                          
                      </div>
                </van-tab>
                <van-tab title="我的矿机">
                     <div>
                            <div class="count_dev">
                                <div><span>小矿机</span><br/>{{myCount.one}}</div>
                                <div><span>中矿机</span><br/>{{myCount.two}}</div>
                                <div><span>大矿机</span><br/>{{myCount.three}}</div>
                                <div><span>超级矿机</span><br/>{{myCount.four}}</div>
                            </div>
                            
                            <div class="order_info"  v-for="(item, index) in  myList_dev"   >
                              <div img ><img :src="baseURL+item.pic"/></div>
                              <div info >
                                  <div>设备信息：<span v-html="item.name"></span></div>
                                  <div>生命周期：<span v-html="'已运行'+item.number+'天'"></span></div>
                                  <div style="display: flex;align-items: center;"><van-progress :percentage="item.number" color="#AF22F3"/></div>
                                  <div>已收益：<span v-html="item.profit"></span></div>
                                  <div v-if="item.status==1"  class="dev_but run" ><van-button  type="default">运行中</van-button></div> 
                                  <div  v-if="item.status==2" class="dev_but stop"><van-button  type="default">已损坏</van-button></div>
                              </div>
                            </div>
                          
                      </div>
                </van-tab>
             
              </van-tabs>
        </div>
        <v-footer :footer_on="1"></v-footer>
            <div style="height: 50px;"></div>
     </div>
</template>

<script>
import footer from '../footer/footer'
export default {
data() {
    return {
          active_device:0,
              list: false,
              loading: false,
              finished: false,
              myList_dev:'',
              myCount:'',
            images_swiper:[],
            user_info:{surplus:0}
    }
},
components:{
    'v-footer':footer
},
mounted(){    
       let that=this; 
       that.base.head_status(1)
      
  


    

       that.$toast.loading({ message: '加载中...', forbidClick: true,overlay:true});

       that.axios_b.all([that.show(), that.myDevice(),that.userinfo()])
        .then( that.axios_b.spread(function (acct, perms) {
              that.$toast.clear();
        }));
                 
},
methods: {
    userinfo(){
         let that=this;
     
         var data={token:JSON.parse(localStorage.userinfo).token}
                       that._API.userinfo(data).then(res => {
                            if(res.code==200){
                                 that.user_info=res.data;
                                 
                            }
                      
                        }).catch(err => {
                            that.$toast({ message: "网络连接失败", position: "bottom" });
                        });
    },
     sliderImg(){
         let that=this;
     
         var data={token:JSON.parse(localStorage.userinfo).token,'type':3}
                       that._API.bannerinfo(data).then(res => {
                            if(res.code==200){
                                 that.images_swiper=res.data;
                                 
                            }else{
                             //  that.$toast({ message: res.msg, position: "bottom" });
                            }
                      
                        }).catch(err => {
                            that.$toast({ message: "网络连接失败", position: "bottom" });
                        });
    },
   show(){
        let that=this;



      //type 1:小矿机，2中型矿机  3大矿机  4超级矿机 //ratio投资收益 cycle生命周期
         var data={token:JSON.parse(localStorage.userinfo).token}
                       that._API.getMachine(data).then(res => {
                            if(res.code==200){
                                  that.list=res.data
                            }
                       //     that.$toast({ message: res.msg, position: "bottom" });
                        }).catch(err => {
                            console.log("err", err);
                        });
   },
   buy(param,price){
       let that=this;

       that.$dialog.confirm({ title: '提示信息',message: '您当前的余额:'+that.user_info.surplus+'￥,确定要换购价格为'+price+'￥的矿机吗'}).then(() => {
        
          
             var data={token:JSON.parse(localStorage.userinfo).token,type:param}
             that.$toast.loading({ message: '加载中...', forbidClick: true,overlay:true});
                       that._API.addMachine(data).then(res => {
                            that.$toast.clear();
                            if(res.code==200){
                                   that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => {
                                     that.user_info.surplus=parseInt(that.user_info.surplus)-parseInt(price)
                                     that.myDevice()
                                    });
                                return
                            }
                             that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => {
                                    // that.$router.go(0)
                                    });
                        }).catch(err => {
                             that.$toast.clear();
                            console.log("err", err);
                        });
            
            }).catch(() => {
            // on cancel
            });



              
   },
   myDevice(){
        let that=this;
        //profit收益  status状态1运行 2损坏 cycle生命周期  number运行天数 
               var data={token:JSON.parse(localStorage.userinfo).token}
                
                       that._API.getUserMachine(data).then(res => {
                         
                            if(res.code==200){
                                    that.myList_dev=res.data.list
                                    that.myCount=res.data.type;
                            }
                            
                          //  that.$toast({ message: res.msg, position: "bottom" });
                        }).catch(err => {  
                            console.log("err", err);
                        });
       
   }





      }
}
</script>


<style lang="scss" scoped >
    /deep/.van-hairline--bottom{    z-index: 1;position: fixed; width: 100%; background: #190147;   top: 0;}
    /deep/.transfer .van-cell-group,/deep/[tab] .van-tabs__nav{background-color: initial;}
    .header *,/deep/.van-nav-bar .van-icon,/deep/[tab] .van-ellipsis{color:white}


    .recharge [ad]{margin: .8rem;}
    .recharge [ad] img{width:100%}
    
    /deep/[tab] .van-tabs__line{background-color:#831BFA}


    [tab] .order_info{display: flex;margin: 1rem .5rem;    height: 6.6rem;padding: .5rem}
     [tab] .order_info>div:nth-child(1){  width: 12.25rem; height: 6.875rem;}
        [tab] .order_info>div:nth-child(2){margin-left: .5rem;     flex: 1;}
    [tab] .order_info img{width: 100%;    height: 100%;}
  
    [tab] .order_info>div *{font-size: 0.7rem;color: white;}
    [tab] .order_info>[info]>div{height: 1.1rem;line-height: 1rem;text-align: justify; letter-spacing: 1px;}
 
    [tab] .van-button--default  {background-color:#831BFA;border-radius: 2rem;    width: 70%;    line-height: 1.7rem;    height: 1.8rem;}
    [tab] .van-button--default{border:0}

    /deep/.van-progress__pivot{display: none}
    /deep/.van-progress{    width: 80%;}
    .dev_but{margin-top: 0.2rem;}
    /deep/.run .van-button--default{background: initial;border:1px solid #00AAFF;}
    /deep/.run .van-button--default span{color: #00AAFF;}
    /deep/.stop  .van-button--default{background: initial;border:1px solid #FF005A;}
     /deep/.stop .van-button--default span{color: #FF005A;}

     .count_dev{display: flex;margin: 1rem; padding: .5rem;border-radius: .5rem;    box-shadow: inset 0 0 1rem 0px #7b00ff;}
      .count_dev>div{width:25%;    text-align: center;font-size: 0.875rem;line-height: 1.5rem;}
      
  /deep/.van-swipe{border-radius: .5rem;margin: 0.7rem;}
</style>
